<template>
  <div id="main-container" class="w-full h-full bg-purple-500 p-4">
    <!-- 主容器 -->
    <div id="content-wrapper" class="m-auto max-w-[1200px]">
      <!-- 顶部内容 -->
      <a-row id="top-content-section" class="m-auto bg-white max-w-[1200px] p-4">
        <!-- 顶部内容区域 -->
        <a-col id="top-content-col" :span="24">
          <a-row id="main-content-row" :gutter="16" class="flex items-start">
            <!-- 主图 -->
            <a-col id="main-image-col" :span="9">
              <a-image id="main-product-image" src="https://picsum.photos/id/237/520/260" alt="产品主图" class="w-full h-auto" />
            </a-col>

            <!-- 文字内容 -->
            <a-col id="text-content-col" :span="14" class="ml-2">
              <a-typography-title id="main-title" :level="3" class="!text-[#7a73a3] !text-xl !mb-4">
                专业全能,飞傲FIIO串流解码一体机S15正式上市!
              </a-typography-title>

              <div id="subtitle-section">
                <a-typography-text
                  v-for="(_, index) in 2"
                  :key="index"
                  :id="`subtitle-${index + 1}`"
                  class="text-gray-500 text-sm mr-4 mb-5 inline-block"
                >
                  [专业全能,飞傲FIIO串流解码一体机S15正式上市!]
                </a-typography-text>
              </div>

              <!-- 资讯列表 -->
              <div id="info-list-section">
                <a-row v-for="(item, index) in list" :key="item.title" :id="`info-item-${index}`" class="mb-3">
                  <a-col :span="24">
                    <a-tag :id="`info-tag-${index}`" class="bg-gray-200 h-5 leading-5 text-center mr-2.5 mb-2.5">
                      {{ item.title }}
                    </a-tag>
                    <a-typography-text :id="`info-content-${index}`" class="text-sm">
                      {{ item.content }}
                    </a-typography-text>
                  </a-col>
                </a-row>
              </div>
            </a-col>
          </a-row>
        </a-col>

        <!-- 底部图片区域 -->
        <a-col id="gallery-section" :span="24">
          <a-row id="gallery-row" :gutter="8">
            <a-col v-for="(_, index) in 2" :key="index" :span="12" :id="`gallery-col-${index}`">
              <img
                :id="`gallery-image-${index}`"
                src="https://picsum.photos/id/237/520/260"
                alt="产品图"
                class="w-[580px] h-[100px] object-cover"
              />
            </a-col>
          </a-row>
        </a-col>
      </a-row>

      <!-- 选项卡 -->
      <a-card id="nav-tabs" class="!bg-transparent !border-none mb-[-10px]">
        <a-row id="tab-row" class="justify-evenly items-center py-2.5 text-white text-lg" :gutter="16">
          <a-col
            v-for="(tab, index) in tabs"
            :key="tab"
            :id="`tab-col-${index}`"
            class="text-center last:!text-black last:!bg-white last:rounded"
          >
            <a-typography-text :id="`tab-text-${index}`" class="hover:text-blue-400 cursor-pointer">
              {{ tab }}
            </a-typography-text>
          </a-col>
        </a-row>
      </a-card>

      <!-- 内容区块 -->
      <a-row id="article-row-1" class="bg-white p-4">
        <a-col v-for="(_, index) in 3" :key="index" :id="`article-1-${index + 1}`" :span="8" class="flex flex-col">
          <a-image
            :id="`article-1-${index + 1}-image`"
            src="https://picsum.photos/id/237/520/260"
            :preview="false"
            class="w-full h-[200px] object-cover pr-1"
          />
          <a-typography-title :id="`article-1-${index + 1}-title`" :level="4" class="!text-[#7a73a3] !text-lg !my-3 !px-2">
            法国帝瓦雷技术加持下的华为Sound音箱
          </a-typography-title>
          <a-typography-text :id="`article-1-${index + 1}-content`" class="text-gray-500 text-sm px-2 line-clamp-3">
            2019年华为和法国帝瓦雷合作,推出Sound
            X无线音箱，是一件音频圈里的大事，甚至引起了不少音响发烧友的关注，我是当时第一时间把玩，评测的，也参与了上海的产品发布会。我之后也把Sound
            X音箱......
          </a-typography-text>
        </a-col>
      </a-row>

      <!-- 重复内容区块添加不同ID -->
      <a-row id="article-row-2" class="bg-white p-4">
        <a-col v-for="(_, index) in 3" :key="index" :id="`article-2-${index + 1}`" :span="8" class="flex flex-col">
          <a-image
            :id="`article-2-${index + 1}-image`"
            src="https://picsum.photos/id/237/520/260"
            :preview="false"
            class="w-full h-[200px] object-cover pr-1"
          />
          <a-typography-title :id="`article-2-${index + 1}-title`" :level="4" class="!text-[#7a73a3] !text-lg !my-3 !px-2">
            法国帝瓦雷技术加持下的华为Sound音箱
          </a-typography-title>
          <a-typography-text :id="`article-2-${index + 1}-content`" class="text-gray-500 text-sm px-2 line-clamp-3">
            2019年华为和法国帝瓦雷合作,推出Sound
            X无线音箱，是一件音频圈里的大事，甚至引起了不少音响发烧友的关注，我是当时第一时间把玩，评测的，也参与了上海的产品发布会。我之后也把Sound
            X音箱......
          </a-typography-text>
        </a-col>
      </a-row>
      <a-row id="article-row-3" class="bg-white p-4">
        <a-col v-for="(_, index) in 3" :key="index" :id="`article-3-${index + 1}`" :span="8" class="flex flex-col">
          <a-image
            :id="`article-3-${index + 1}-image`"
            src="https://picsum.photos/id/237/520/260"
            :preview="false"
            class="w-full h-[200px] object-cover pr-1"
          />
          <a-typography-title :id="`article-3-${index + 1}-title`" :level="4" class="!text-[#7a73a3] !text-lg !my-3 !px-2">
            法国帝瓦雷技术加持下的华为Sound音箱
          </a-typography-title>
          <a-typography-text :id="`article-3-${index + 1}-content`" class="text-gray-500 text-sm px-2 line-clamp-3">
            2019年华为和法国帝瓦雷合作,推出Sound
            X无线音箱，是一件音频圈里的大事，甚至引起了不少音响发烧友的关注，我是当时第一时间把玩，评测的，也参与了上海的产品发布会。我之后也把Sound
            X音箱......
          </a-typography-text>
        </a-col>
      </a-row>

      <!-- 品牌商 -->
      <a-card id="brand-section" class="w-[1200px] bg-white m-auto pt-4 !font-bold">
        <a-typography-text id="brand-title" class="pl-2.5 block">品牌商:</a-typography-text>
        <a-divider id="brand-divider" class="my-2" />
        <div id="brand-logos" class="flex justify-evenly">
          <a-image
            v-for="item in 8"
            :key="item"
            :id="`brand-logo-${item}`"
            src="https://picsum.photos/id/237/520/260"
            :preview="false"
            class="w-[100px] h-[50px] p-2"
          />
        </div>
      </a-card>

      <!-- 友情链接 -->
      <a-card id="partner-links" class="w-[1200px] bg-white mx-auto pt-4">
        <a-typography-text id="partner-title" class="pl-2.5 font-bold block">友情链接:</a-typography-text>
        <a-divider id="partner-divider" class="my-2" />
        <div id="link-list" class="flex">
          <a-typography-text
            v-for="(link, index) in links"
            :key="link"
            :id="`partner-link-${index}`"
            class="pl-2.5 pr-7.5 text-gray-600 hover:text-blue-500 cursor-pointer transition-colors"
          >
            {{ link }}
          </a-typography-text>
        </div>
      </a-card>
    </div>
  </div>
</template>

<script setup lang="jsx">

const list=ref([
  {
      title:'资讯',
      content:'专业全能,飞傲FIIO串流解码一体机S15正式上市!'
  },
  {
      title:'资讯1',
      content:'专业全能,飞傲FIIO串流解码一体机S15正式上市!'
  },
  {
      title:'资讯2222',
      content:'专业全能,飞傲FIIO串流解码一体机S15正式上市!'
  },
  {
      title:'资讯333',
      content:'专业全能,飞傲FIIO串流解码一体机S15正式上市!'
  }
]) // 保持原数据不变

const tabs = [
  '最近更新',
  '台式耳机系统',
  '随身耳机系统', 
  '音响系统',
  '音乐与唱片',
  '无线耳机与音响'
];
const links = [
  '家电论坛',
  '天龙音响',
  '耳机.中国-安润公司',
  '家电联盟',
  'PCHome音频频道',
  'NUXUS',
  'Silent Angel'
];
</script>

<style></style>